<template>
	<div>
		<el-card>
			<el-form :model="state.pageParam.param" label-width="120"  ref="queryFormRef" @keyup.enter.native="loadList">
				<el-row>
					<el-col :xs="3" :sm="4" :md="4" :lg="6" :xl="6">
							<el-form-item label="姓名" prop="staff_name">
								<el-input v-model="state.pageParam.param.staff_name" placeholder="姓名" clearable></el-input>
							</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="4" :lg="6" :xl="6">
							<el-form-item label="名称" prop="username">
								<el-input  v-model="state.pageParam.param.username" placeholder="用户名" clearable/>
							</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="4" :lg="6" :xl="6">
						<el-form-item label="起始时间" prop="oper_time_start">
							<el-date-picker v-model="state.pageParam.param.oper_time_start" type="date" placeholder="起始时间"  value-format="YYYY-MM-DD" format="YYYY-MM-DD">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="4" :lg="6" :xl="6">
						<el-form-item label="结束时间" prop="oper_time_end">
							<el-date-picker v-model="state.pageParam.param.oper_time_end" type="date" placeholder="结束时间"  value-format="YYYY-MM-DD" format="YYYY-MM-DD">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="btnSearchStyle">
					<el-button type="primary" class="ml7" @click="loadList">
							<el-icon>
									<ele-Search />
							</el-icon>
							查询
					</el-button>
					<el-button type="primary" class="ml10" @click="reSetForm(queryFormRef)">
							<el-icon>
									<ele-Refresh />
							</el-icon>
							重置
					</el-button>
			</div>
		</el-card>
		<el-card>
			<el-table :data="state.dataList" stripe style="width: 100%">
				<el-table-column prop="staffName" header-align="center" align="center" label="姓名"/>
				<el-table-column prop="username" header-align="center" align="center" label="用户名"/>
				<el-table-column prop="module" header-align="center" align="center" label="功能模块"/>
				<el-table-column prop="description" header-align="center" align="center" label="用户操作"/>
				<!-- <el-table-column prop="methods" header-align="center" align="center" label="请求方法"/> -->
				<el-table-column prop="actionTime" header-align="center" align="center" label="用时（毫秒）"/>
				<el-table-column prop="status" header-align="center" align="center" label="是否成功" column-key="1008" :formatter="formatStatus"/>
				<el-table-column prop="userIp" header-align="center" align="center" label="IP地址"/>
				<el-table-column prop="operTime" header-align="center" align="center" label="操作时间"/>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="state.pageParam.page"
				background
				v-model:page-size="state.pageParam.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.total" small>
			</el-pagination>
		</el-card>
	</div>
</template>
<script setup lang="ts" name="tenant">
import { FormInstance } from 'element-plus';
import { ref, reactive, onMounted } from 'vue'
import { systemApi } from '/@/api/sys/system-api'
import { getDataDictionaryList } from '/@/utils/cacheDic';
const queryFormRef = ref<FormInstance>()
const state = reactive({
	listLoading: false,
	total: 0,
	dataList: [],
	dataListSelections: [],
	pageParam: {
		page: 1,
		pageSize: 10,
		param: {
			staff_name: '',
			username: '',
			oper_time_start: '',
			oper_time_end: '',
		}
	},
	addOrUpdateVisible: false,
	dataDictionaryList: {} as any,
})
const loadList = () => {
	state.listLoading = true
	systemApi.querySysLogListByPage(state.pageParam).then(data => {
		if (data && data.code === 0) {
			state.dataList = data.data.records
			state.total = data.data.totalRow
		} else {
			state.dataList = []
			state.total = 0
		}
	}).catch(() => {
	}).finally(() => {
		state.listLoading = false
	})
}
// 页面加载时
onMounted(() => {
	getDataDictionaryList(state.dataDictionaryList, ['1008'])
	// 列表查询
	loadList()
})

//重置
const reSetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
	state.pageParam.page = 1
	loadList()
}
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.pageParam.pageSize = val;
	loadList()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.pageParam.page = val;
	loadList()
}
const formatStatus = (row: any, column: any, cellValue: string | number, index: number) => {
	if(Object.keys(state.dataDictionaryList).length>0){
		if (cellValue) {
			return state.dataDictionaryList[column.columnKey].get(cellValue);
		}
	}
}
</script>